<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="top_bg"></view>
        <view class="order-main">
            <view @click="goUserDetail" class="order-user-main">
                <image src="/static/img/default.png" mode="aspectFill"></image>
                <view class="user-name">
                    <view>{{ valetUserInfo.StoreName }}</view>
                    <text class="user-tag">{{ valetUserInfo.DealerGradeName }}</text>
                </view>
            </view>
            <view class="order-item-box" @click="goSelectAddress" v-if="useAddress">
                <view class="order-user">
                    <view class="user-info">
                        <view class="user-info-name">
                            <image src="/static/img/order-map.png"></image>{{ useAddress.ContactName }}
                            {{ useAddress.ContactTel }}
                        </view>
                        <text class="user-info-location">{{ useAddress.ProvinceName }}{{ useAddress.CityName }}{{
                            useAddress.AreaName
                            }}{{ useAddress.StreetName ? useAddress.StreetName : ""
                            }}{{ useAddress.ContactAddress }}</text>
                    </view>
                    <view><uni-icons class="cell-icon" size="24" type="arrowright"></uni-icons></view>
                </view>
            </view>
            <view class="order-item product-item product-item-line" v-else @click="goSelectAddress">
                <view class="title-text title-text-flex" style="padding-bottom: 0">
                    <view>收货地址</view>
                    <view class="title-text-right">
                        <text class="title-text-desc" style="padding-right: 0">请先添加收货地址</text>
                        <uni-icons type="arrowright" size="24" style="margin-top: 6rpx"
                            customIcons="icon-black"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item product-item-line">
                <view class="title-text title-text-flex" style="padding-bottom: 0">
                    <view>发货仓库</view>
                    <view class="title-text-right">
                        <text class="title-text-desc" style="padding-right: 0; font-weight: bold">{{ warehouse }}</text>
                    </view>
                </view>
            </view>
            <view class="order-item product-item product-item-line" v-if="postTypes.length > 0">
                <view class="title-text title-text-flex" style="padding-bottom: 0" @click="selType">
                    <view>配送方式</view>
                    <view class="title-text-right">
                        <text class="title-text-desc" style="padding-right: 0">{{
                            PostTypeName == "" ? "请选择配送方式" : PostTypeName
                            }}</text>
                        <uni-icons type="arrowright" size="24" style="margin-top: 6rpx"
                            customIcons="icon-black"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <text class="title-text">订购商品</text>
                <view class="order-item-main" @click="$refs.policyPop.open()">
                    <view class="order-item-imgs">
                        <view class="img-item" v-for="(item, index) in showImgs" :key="index">
                            <image mode="aspectFill" :src="easyGetImgUrl(item)" class="order-item-img"></image>
                            <view class="order-item-name" v-if="itemname">{{ itemname }}</view>
                        </view>
                        <uni-icons type="more" v-if="imgs.length > 3"></uni-icons>
                    </view>
                    <view class="right-box">
                        <view class="num-box">
                            <text class="order-desc">共{{ total.class }}种</text>
                        </view>
                        <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <text class="title-text">优惠信息</text>
                <view class="coupon-item">
                    <view class="coupon-item-main" @click="selectCoupon">
                        <image class="icon-coupon" src="/static/img/icon_coupon.png"></image>
                        <view class="icon-coupon-name">
                            <text>优惠券</text>
                        </view>
                        <text class="no-use-coupon" :class="{ 'use-coupon': coupons.length > 0 }" v-if="isDefault">{{
                            coupons.length }}张优惠券可用</text>
                        <text class="use-coupon" v-if="!isDefault && useCoupon">{{ useCoupon.V_Name }}</text>
                        <text class="no-use-coupon" v-if="!isDefault && !useCoupon">不使用优惠券</text>
                        <uni-icons class="icon-right" type="arrowright" size="24"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <view class="title-text title-text-flex" style="position: relative">
                    <view>订单金额</view>
                    <image class="gai" src="@/static/img/gai.png" v-if="isChangePriceNum > 0"></image>
                </view>
                <view class="">
                    <view class="order-price">
                        <view class="price-items">
                            <view class="price-item">
                                <text class="label">商品金额</text>
                                <text class="value">￥{{ total.moeny }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">运费</text>
                                <text class="value">+ ￥{{ postPrice }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">促销优惠</text>
                                <text class="value color-main">- ￥{{ discount }}</text>
                            </view>
                        </view>
                        <view class="pay-price">
                            <text class="await-pay-price-text">
                                <text>订单金额:</text>
                                <text>￥{{ getPayMoney() }}</text>
                                <text class="edit" v-if="isChangPrice == 1" @click="edit()">修改</text>
                            </text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="order-item msg-item">
                <text>买家留言(选填）</text>
                <textarea v-model="remark" class="msg-input" placeholder="请在此处填写留言..."></textarea>
            </view>
        </view>
        <!-- 	<view class="order-delivery-date item-group remark-item">
			<view class="cell-item ">
				<text class="cell-label">订单备注</text>
			</view>
			<view class="delivery-info ">
				<textarea v-model="remark" class="msg-input" placeholder="订单备注"></textarea>
				</view>
			</view> -->

        <view class="bottom-bar">
            <view class="price-left">
                <text>订单金额：</text><text class="proce-unit">￥</text><text class="price-value">{{ getPayMoney() }}</text>
            </view>
            <button class="btn btn-main" @click="submit">提交订单</button>
        </view>
        <!-- 		<uni-popup ref="popPostType" type="bottom" background-color="#fff" :safe-area='false'>
			<view class="custom-actions-pop">
				<view class="custom-actions">
					<button v-for="(item,index) in postTypes" :key="index" class="btn btn-gray"  @click="selectFn(item)">{{item.Name}}</button>
				</view>
				
				<view class="cancel">
					<button class="btn btn-gray" @click="cancelFn()">取消</button>
				</view>
			</view>
		</uni-popup> -->
        <uni-popup type="bottom" ref="typelistpop" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择配送方式</text></view>
                <scroll-view scroll-y="true" class="add-pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in postTypes" @click="selecttype(item, index)">
                            <text>{{ item.Name }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="cancelFn()">取消</button>
            </view>
        </uni-popup>
        <!-- 商品清单 -->
        <uni-popup ref="policyPop" type="right" class="popupright" :safe-area="false">
            <view class="pop-pro-list"
                :style="'height:' + systemInfo.windowHeight + 'px;width:' + systemInfo.windowWidth + 'px'">
                <view class="pop-header">
                    <text class="text">商品清单</text>
                    <uni-icons class="icon-close" size="40" type="arrowleft" @click="listclose()"> </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll">
                    <order-submit-list v-for="(item, index) in dataList" :key="index" :isChangPrice="isChangPrice"
                        :giftList="giftList" :item.sync="item" @changePolicy="changePolicy"></order-submit-list>
                </scroll-view>
            </view>
        </uni-popup>
        <uni-popup ref="amountTotalEdit" type="center" :animation="false" :mask-click="false">
            <view class="pop-return-box">
                <view class="pop-return-li">
                    <view>小　　计：</view>
                    <view class="strong">￥{{ getPayoldMoney() }}</view>
                </view>
                <view class="pop-return-li">
                    <view>优惠金额：</view>
                    <input type="digit" v-model="couponAmount" @input="keycouponAmount($event)" />
                </view>
                <view class="pop-return-li">
                    <view>订单总价：</view>
                    <view class="strong">￥{{ getPayNewMoney() }}</view>
                </view>

                <view class="pop-action">
                    <view @click="amountTotalEditClose">取消</view>
                    <view @click="amountTotalEditConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import {
    GetProductDataBySubmit,
    StatisPostageMoneyByCar,
    SubmitFromCar,
    GetPostageTypeList,
    GetInitOrderInfo,
} from "@/service/api/order.js"

import { GetCarList, GetUserAddressList } from "@/service/api/user.js"

import { GetPostTypes } from "@/service/api/company.js"
import { GetWarehouseList } from "@/service/api/warehouse.js"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import orderSubmitList from "@/components/order/order-submit-list.vue"
export default {
    components: {
        easyProImage,
        orderSubmitList,
    },
    data() {
        return {
            config: {
                title: "填写订单",
                centerSlot: true,
                rightSlot: false,
                backgroundColor: [1, ["#9F897D", "#414141"]],
                color: ["#ffffff"],
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
            warehouse: "",
            valetUserInfo: null,
            ids: "",
            storeUserId: 0,
            warehouseId: 0,
            usePost: 0,
            postTypes: [],
            useAddress: null,
            postPrice: 0,
            changePostageMoney: 0,
            cartDatas: [],
            total: {
                class: 0,
                moeny: 0,
                num: 0,
                price: 0,
            },
            discount: 0,
            remark: "",
            policyList: [],
            couponDiscount: 0,
            useCoupon: null,
            coupons: [],
            couponPrice: 0,
            isDefault: true,
            imgs: [],
            showImgs: [],
            itemname: "", //单个商品显示名称
            systemInfo: {},
            dataList: [],
            giftList: [],
            param: {
                storeUserId: 0,
                carIds: "",
                orderPolicy: {
                    carPolicyList: [],
                    orderGiftList: [],
                },
            },
            couponAmount: "",
            oldTotal: null,
            newTotal: null,
            PostType: 0,
            PostTypeName: "",
            isChangePriceNum: 0,
            isChangPrice: 0,
            hasAddress: false,
        }
    },

    onLoad(e) {
        if (e.valetUserInfo) {
            this.valetUserInfo = JSON.parse(decodeURIComponent(e.valetUserInfo))
            this.storeUserId = this.valetUserInfo.StoreUserId

            this.param.storeUserId = this.storeUserId
            console.log(this.valetUserInfo)
        }
        if (e.warehouseId) {
            this.warehouseId = e.warehouseId
        }
        if (e.PostTypeName) {
            this.PostTypeName = e.PostTypeName
        }
        if (e.PostType) {
            this.PostType = e.PostType
        }
        if (e.useAddress) {
            this.useAddress = JSON.parse(decodeURIComponent(e.useAddress))
            this.hasAddress = true
        }
        if (e.changePostageMoney) {
            this.changePostageMoney = e.changePostageMoney
        }
        if (e.ids) {
            this.ids = e.ids
            this.param.carIds = e.ids
        }
    },
    mounted() {
        //1、获取要购买的购物车商品ID串
        //2、获取促销优惠信息
        //3、获取收货地址
        //4、获取运费
        //5、获取商品清单

        this.param = {
            carIds: this.ids,
            valetUserId: this.valetUserInfo.StoreUserId,
            orderPolicy: {
                carPolicyList: [],
                orderGiftList: [],
            },
        }

        this.getProductDataBySubmit()
        this.getPostTypes()
        this.getUserAddressList()
        this.GetWarehouseList()
        this.getOrderStting()
        this.systemInfo = uni.getSystemInfoSync()
    },
    onShow() { },
    methods: {
        getOrderStting() {
            GetInitOrderInfo().then((res) => {
                this.isChangPrice = res.Data.IsChangPrice
            })
        },

        keycouponAmount(e) {
            let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
            console.log(val)
            if (!val) {
                this.couponAmount = ""
                return
            }
            var reg = /[^\d.]/g

            // 只能是数字和小数点，不能是其他输入
            val = val.replace(reg, "")
            // // 保证第一位只能是数字，不能是点
            val = val.replace(/^\./g, "")
            // // 小数只能出现1位
            val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
            // // 小数点后面保留2位
            val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")
            console.log(val)
            if (Number(val) > this.getPayoldMoney()) {
                this.easyToast("优惠金额不能大于总金额")
                this.$nextTick(() => {
                    this.couponAmount = this.getPayoldMoney()
                    this.getPayNewMoney()
                })
                return
            }
            this.$nextTick(() => {
                this.couponAmount = val
                this.getPayNewMoney()
            })
        },
        edit() {
            this.$refs.amountTotalEdit.open()
        },
        amountTotalEditClose() {
            this.$refs.amountTotalEdit.close()
        },
        amountTotalEditConfirm() {
            this.total.price = this.getPayNewMoney() - Number(this.postPrice)
            this.discount = Number(this.couponAmount)
            this.$refs.amountTotalEdit.close()
        },
        listclose() {
            let num = 0
            this.cartDatas.forEach((e, index) => {
                if (e.Amount == 0) {
                    this.cartDatas.splice(index, 1)
                }
            })
            let list = []
            let obj = {}
            obj.CarList = this.cartDatas
            list.push(obj)
            this.getImageList(list)
            this.cartDatas.forEach((e, index) => {
                if (e.IsChangePrice) {
                    num++
                }
            })
            if (this.isChangePriceNum != num) {
                this.discount = 0
                this.couponAmount = ""
                this.isChangePriceNum = num
            }
            this.getTotal()
            if (this.PostType > 0) {
                this.statisPostageMoneyByCar(this.PostType)
            }
            this.$refs.policyPop.close()
        },
        getUserAddressList() {
            let param = {}
            let path = "?storeUserId=" + this.storeUserId
            GetUserAddressList(param, path).then((res) => {
                //取默认
                let data = res.Data.find((e) => {
                    return e.IsDefault
                })
                //没默认取第一条
                if (!data && res.Data.length > 0) {
                    data = res.Data[0]
                }
                this.setAddress(data)
            })
        },
        getPostTypes() {
            GetPostageTypeList().then((res) => {
                this.postTypes = res.Data
                if (!this.PostTypeName) {
                    this.selecttype(res.Data[0])
                }
                // this.usePost = res.Data.PostDefault
            })
        },
        getProductDataBySubmit() {
            this.cartDatas = []
            this.discount = 0
            GetProductDataBySubmit(this.param, "").then((res) => {
                this.policyList = []
                //优惠券
                if (res.Data.CouponList && res.Data.CouponList.length > 0) {
                    this.coupons = res.Data.CouponList
                    //默认不选
                    // this.useCoupon = res.Data.CouponList[0]
                }
                this.dataList = res.Data.List
                this.giftList = res.Data.GiftList
                this.cartDatas = res.Data.GiftList
                res.Data.List.forEach((e) => {
                    this.cartDatas = this.cartDatas.concat(e.CarList)
                    this.discount += e.Discount

                    //处理优惠
                    if (e.PolicyId) {
                        e.CarList.forEach((item) => {
                            let obj = {
                                carId: item.ID,
                                policyId: e.PolicyId,
                                productId: item.ProductId,
                                skuId: item.SkuId,
                                unitId: item.UnitId,
                            }
                            this.policyList.push(obj)
                        })
                    }
                })
                this.discount = this.discount.toFixed(2)
                console.log(this.discount)
                this.getImageList(res.Data.List)
                this.getTotal()
                this.$forceUpdate()
                console.log(this.cartDatas)
            })
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    if (e.CarList) {
                        e.CarList.forEach((item) => {
                            arr.push(item.V_ThumbnailUrl160)
                        })
                    }
                })
            }
            if (list[0].CarList.length == 1 && list.length == 1) {
                this.itemname = list[0].CarList[0].V_Title
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
        },
        telFn() {
            uni.makePhoneCall({
                phoneNumber: this.useAddress.ContactTel,
            })
        },
        goUserDetail() {
            this.easyGoTo(
                "/pages/customer/detail?StoreUserId=" + this.storeUserId + "&StoreId=" + this.valetUserInfo.StoreId,
            )
        },
        goProList() {
            this.easyGoTo(
                "/pages/order/detail-pro-list?datas=" +
                encodeURIComponent(JSON.stringify(this.cartDatas)) +
                "&totalPrice=" +
                this.total.moeny,
            )
        },
        goDelivery() {
            this.easyGoTo("/pages/order/delivery-record?id=" + 0)
        },
        statisPostageMoneyByCar(PostageTempId) {
            let path = ""
            if (PostageTempId) {
                path = `?storeUserId=${this.storeUserId}&carIds=${this.ids}&provinceId=${this.useAddress.ProvinceId}&cityId=${this.useAddress.CityId}&areaId=${this.useAddress.AreaId}&postageTempId=${PostageTempId}`
            } else {
                path = `?storeUserId=${this.storeUserId}&carIds=${this.ids}&provinceId=${this.useAddress.ProvinceId}&cityId=${this.useAddress.CityId}&areaId=${this.useAddress.AreaId}`
            }
            console.log("计算运费")
            if (this.changePostageMoney) {
                this.postPrice = this.changePostageMoney
            } else {
                StatisPostageMoneyByCar({}, path).then((res) => {
                    this.postPrice = res.Data.Value.toFixed(2)
                })
            }
        },
        getTotal() {
            let total = {
                class: 0,
                moeny: 0,
                num: 0,
                price: 0,
            }
            this.cartDatas.forEach((e) => {
                total.class += 1
                total.num += e.TotalAmount
                total.moeny += e.TotalMoney
            })
            total.moeny = total.moeny.toFixed(2)

            total.price = (total.moeny - this.discount).toFixed(2)
            this.total = total
            this.getUseCoupon(total.moeny)
            this.$forceUpdate()
        },
        GetWarehouseList() {
            GetWarehouseList().then((res) => {
                if (res.State == 1) {
                    let warehousename = res.Data.filter((e) => {
                        return e.WarehouseId == this.warehouseId
                    })
                    this.warehouse = warehousename[0].WarehouseName
                }
            })
        },
        submit() {
            if (!this.useAddress || !this.useAddress.ContactName || !this.useAddress.ProvinceName) {
                this.easyToast("请选择收货地址")
                return
            }
            if (this.postTypes.length > 0 && this.PostType == 0) {
                this.easyToast("请选择配送方式")
                return
            }
            let param = {
                carIds: this.ids,
                carList: this.cartDatas,
                postType: this.PostType,
                postTypeName: this.PostTypeName,
                fromType: 4,
                addressId: this.useAddress.ID,
                userId: this.storeUserId,
                warehouseId: +this.warehouseId,
                remark: this.remark,
                orderPolicy: {
                    carPolicyList: this.policyList,
                },
                isTempCar: true,
                valetDiscountMoney: this.couponAmount ? Number(this.couponAmount) : 0,
            }
            if (this.useCoupon) {
                param.couponId = this.useCoupon.ID
                param.couponMoney = this.useCoupon.CouponPrivilegeValue
            }
            if (this.changePostageMoney) {
                param.changePostageMoney = this.changePostageMoney
            }
            console.log(param)
            // return
            uni.showLoading({
                title: "提交中",
            })
            SubmitFromCar(param).then((res) => {
                uni.hideLoading()
                if (res.State == 1) {
                    this.easyRemoveCurrentGoTo(
                        "/pages/order/result?data=" + encodeURIComponent(JSON.stringify(res.Data)),
                    )
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        selType() {
            this.$refs.typelistpop.open()
        },
        cancelFn() {
            this.$refs.typelistpop.close()
        },
        goSelectAddress() {
            if (this.hasAddress) {
                return
            }
            let selectId = this.useAddress ? this.useAddress.ID : 0
            let path = "/pages/address/index?storeUserId=" + this.storeUserId + "&from=select&selectId=" + selectId
            uni.navigateTo({
                url: path,
                events: {
                    selectEvent: (data) => {
                        this.setAddress(data)
                    },
                },
            })
        },
        setAddress(data) {
            this.useAddress = data
            if (this.useAddress) {
                this.statisPostageMoneyByCar()
            }
        },
        selectCoupon() {
            let id = ""
            if (this.useCoupon) {
                id = String(this.useCoupon.ID)
            }
            uni.navigateTo({
                url:
                    "/pages/select/select-coupon?id=" +
                    id +
                    "&coupons=" +
                    encodeURIComponent(JSON.stringify(this.coupons)),
                events: {
                    selectEvent: (data) => {
                        this.isDefault = false
                        console.log(data)
                        this.useCoupon = data
                        this.getTotal()
                    },
                },
            })
        },
        getUseCoupon() {
            let price = 0
            if (!this.useCoupon) {
                return price
            }
            switch (this.useCoupon.V_PrivilegeWay) {
                case 0:
                    //折扣券
                    price =
                        this.total.price -
                        this.discount -
                        (this.total.price - this.discount) * (this.useCoupon.CouponPrivilegeValue / 100)
                    break
                case 1:
                    //抵用券
                    price = this.useCoupon.CouponPrivilegeValue
                    break
                case 2:
                    price = this.useCoupon.CouponPrivilegeValue
                    break
                case 3:
                    break
                default:
                    break
            }
            price = price.toFixed(2)
            if (Number(price) > Number(this.total.price)) {
                price = this.total.price
            }
            this.couponPrice = price
            return price
        },
        getPayMoney() {
            return (Number(this.total.price) + Number(this.postPrice) - this.getUseCoupon()).toFixed(2)
        },
        getPayoldMoney() {
            return (Number(this.total.moeny) + Number(this.postPrice) - this.getUseCoupon()).toFixed(2)
        },
        getPayNewMoney() {
            // return this.getPayoldMoney() - this.couponAmount
            return (this.getPayoldMoney() - this.couponAmount).toFixed(2)
        },
        //更新选择优惠
        changePolicy(item) {
            console.log("changePolicy", item)
            let hasIn = false
            let carPolicyList = this.param.orderPolicy.carPolicyList

            if (carPolicyList.length > 0) {
                carPolicyList.forEach((e) => {
                    if (e.CarId == item.CarId) {
                        hasIn = true
                        e.PolicyId = item.PolicyId
                    }
                })
            }
            if (!hasIn) {
                carPolicyList.push(item)
            }
            this.getProductDataBySubmit()
        },
        selecttype(item, index) {
            this.PostTypeName = item.Name
            this.PostType = item.ID
            this.$refs.typelistpop.close()
            this.statisPostageMoneyByCar(item.ID)
            this.$forceUpdate()
        },
    },
}
</script>

<style lang="scss">
.item-group {
    background: $color-white;
    margin-bottom: $app-page-padding;
}

.state-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16rpx $app-page-padding;
    background: $color-yellow-1;

    .order-num {
        flex: 1;
    }

    .order-state {
        display: flex;
        flex-direction: row;

        .icon {
            margin-right: 10rpx;
        }
    }
}

.order-info {
    .see-more {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 66rpx;
        border-bottom: solid 1rpx $border;
    }

    .pro-list {
        .pro-list-item {
            display: flex;
            flex-direction: row;
            padding: $app-page-padding;
            background: $border;
            align-items: center;

            .pro-info {
                display: flex;
                flex-direction: column;

                .pro-price {
                    color: $app-color-text-tip;
                }
            }
        }
    }

    .order-price {
        display: flex;
        flex-direction: column;

        .order-price-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 15rpx $app-page-padding;

            .label {
                flex: 1;
                color: $app-color-text-tip;
            }

            .price {
                text {
                    color: $app-color-text-tip;
                }

                .text-red {
                    color: $color-red;
                }
            }
        }

        .total-item {
            padding-top: 0;
            padding-bottom: $app-page-padding;

            .label {
                flex: 1;
                color: $app-color-text-main;
                font-size: $font-size-30;
                font-weight: 700;
            }

            .price {
                text {
                    color: $color-red;
                }
            }
        }
    }
}

.cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $app-page-padding;
    height: 90rpx;

    .cell-label {
        flex: 1;
        display: flex;
        align-items: center;
    }
}

.order-delivery-date {
    .cell-item {}

    .delivery-info {
        padding: $app-page-padding;
        padding-top: 0;

        .title {
            display: flex;
            margin-bottom: 16rpx;
            font-weight: 700;
        }

        .delivery-info-item {
            padding: 8rpx 0;
            display: flex;
            flex-direction: row;

            .label {
                color: $app-color-text-tip;
                flex: 1;
            }
        }
    }
}

.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 0 30rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.1);

    .price-left {
        flex: 1;

        text {
            font-size: 24rpx;
            color: #333;
        }

        .proce-unit {
            font-size: $font-size-24;
            color: $app-color-main;
        }

        .price-value {
            font-size: 40rpx;
            color: $app-color-main;
            font-weight: bold;
        }
    }

    .btn {
        width: 220rpx;
        height: 80rpx;
        color: $app-color-main;
        border-radius: 45rpx;
        font-size: 32rpx;
        color: #ffffff;
    }
}

.cell-icon {
    margin-top: 4rpx;
}

.msg-input {
    display: flex;
    display: flex;
    height: 150rpx;
    background: #f7f7f7;
    border-radius: $border-radius-10;
    padding: 10rpx;
    width: calc(100% - 20rpx);
}

.remark-item {}

.top_bg {
    height: 298rpx;
    background: linear-gradient(to right, #9f897d, #414141);
}

.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
    // background: red;
}

.product-item {
    padding: $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .title-text-desc {
        font-size: $font-size-24;
        color: $color-gray-2;
        padding-right: 12rpx;
        font-weight: normal;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.order-main {
    margin-top: -298rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;

            image {
                width: 42rpx;
                height: 40rpx;
            }
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-main;
            }

            .user-info-name {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: $font-size-32;
                color: $color-gray-1;
                font-weight: 700;
                margin-bottom: 12rpx;

                image {
                    width: 42rpx;
                    height: 40rpx;
                    margin-right: 8rpx;
                }
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
                color: $color-gray-2;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: $app-color-main;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;

    .btn {
        height: 64rpx;
        margin-left: 20rpx;
        padding: 0 40rpx;
    }
}

.logistics {
    height: 88rpx;
    border-top: 1rpx solid #ebebeb;
    display: flex;
    padding: 0 $app-item-padding;
    justify-content: space-between;
    align-items: center;

    .logistics-title {
        font-size: $font-size-28;
        font-weight: bold;
    }

    .logistics-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logistics-desc {
        padding-right: 12rpx;
    }
}

.remark {
    background: #f7f7f7;

    .remark-main {
        border-bottom: 1rpx solid #ebebeb;

        .remark-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $color-gray-1;
            padding: 24rpx 24rpx 20rpx 24rpx;

            view {
                font-size: $font-size-28;
            }

            text {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }

        .remark-desc {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding: 0rpx 24rpx 20rpx 24rpx;
            word-break: break-all;
        }
    }

    & .remark-main:last-child {
        border: none;
    }
}

.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;

    text {
        color: $color-gray-3;
    }
}

.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    .pop-return-title {
        display: flex;
        justify-content: center;

        // padding: 0;
        // padding-bottom: 10rpx;
        text {
            font-weight: 700;
            font-size: 34rpx;
        }
    }

    .pop-return-li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10rpx;

        input {
            flex: 1;
            height: 80rpx;
            background: #f0f0f0;
            border-radius: 10rpx;
            font-size: 34rpx;
            color: #000;
            padding-left: 20rpx;
        }

        .strong {
            font-weight: bold;
            font-size: 36rpx;
            color: $app-color-main;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 20rpx -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        &>view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }

    .return-msg {
        margin-bottom: 20rpx;

        .card-group-cell {
            margin-left: 0 !important;
        }
    }

    .img-title {
        display: flex;
        color: $app-color-text-tip;
        margin-bottom: 20rpx;
    }

    .action {
        display: flex;
        flex-direction: row;

        .btn {
            flex: 1;
            border-radius: $border-radius-10;
            height: 70rpx;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;

    .pop-header {
        padding-top: 52rpx;
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 100rpx);
    }
}

.step-pro-list {
    background: #f6f6f6;
    border-radius: 24rpx 24rpx 0 0;
    height: auto;
    padding-bottom: 0;
    height: 70vh;

    .pop-header {
        border-bottom: none;
    }
}

.steplist {
    padding: 40rpx 26rpx 40rpx 34rpx;
    background: #f6f6f6;

    &>view {
        position: relative;
        display: flex;
        height: 104rpx;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 12rpx;

        .leftstate {
            width: 24rpx;
            height: 24rpx;
            background: #b1b1b1;
            border-radius: 50%;
            margin-right: 36rpx;
            position: relative;
            z-index: 10;

            image {
                width: 24rpx;
                height: 24rpx;
                display: block;
            }
        }

        .right_desc {
            flex: 1;
            background: #ffffff;
            border-radius: 8rpx;
            color: $color-gray-2;
            font-size: 28rpx;
            height: 104rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 24rpx;
        }
    }

    &>view:last-child:after {
        width: 0;
        height: 0;
    }

    .current {
        .leftstate {
            background: $app-color-main;
            width: 32rpx;
            height: 32rpx;
            margin-left: -4rpx;

            image {
                width: 32rpx;
                height: 32rpx;
                display: block;
            }
        }

        .right_desc {
            font-weight: bold;
            font-size: 32rpx;
            color: $app-color-main;
        }
    }

    .active {
        .leftstate {
            background: $app-color-main;
        }

        .right_desc {
            view {
                font-size: 28rpx;
                color: $color-gray-1;
            }

            text {
                font-size: 24rpx;
                color: $color-gray-2;
            }
        }
    }

    &>.active:after,
    &>.current:after {
        content: "";
        width: 2rpx;
        height: 104rpx;
        background: $app-color-main;
        position: absolute;
        left: 11rpx;
        top: 50%;
        z-index: 1;
    }
}

.ptb0 {
    padding-bottom: 0 !important;
}

.order-submit-list {
    background-color: $color-white;
    border-radius: $border-radius-10;

    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;

        .label-text {
            flex: 1;
        }
    }

    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}

.order-submit-item {
    display: flex;
    flex-direction: column;
    border-bottom: 12rpx solid #f1f1f1;
    padding-bottom: 14rpx;
    padding: 24rpx;

    .item-top {
        display: flex;
        flex-direction: row;

        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-main;
                flex: 1;
                display: flex;
                align-items: center;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }

            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }

        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}

.order-user-main {
    display: flex;
    padding: 24rpx 24rpx 48rpx 24rpx;
    justify-content: flex-start;

    image {
        width: 120rpx;
        height: 120rpx;
        border: 2rpx solid #ffffff;
        border-radius: 50%;
        margin-right: 28rpx;
    }

    .user-name {
        font-size: 44rpx;
        color: #ffffff;

        .user-tag {
            height: 42rpx;
            padding: 0 16rpx;
            background: #f93837;
            border-radius: 5rpx;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 42rpx;
            text-align: center;
            display: inline-block;
        }
    }
}

.coupon-item {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .coupon-item-main {
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-coupon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .icon-coupon-name {
            flex: 1;
        }

        .no-use-coupon {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }

        .use-coupon {
            color: $color-orange-1;
            font-size: $font-size-24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 60%;
        }

        .icon-right {
            margin-left: 8rpx;
        }
    }

    .coupon-item-desc {
        text {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
    }
}

.order-price {
    .price-items {
        border-bottom: solid 1rpx $uni-bg-color-grey;

        .price-item {
            padding: $app-page-padding 0;
            display: flex;
            flex-direction: row;

            .label {
                display: flex;
                flex: 1;
                font-size: 26rpx;
                color: $color-gray-1;
            }

            .value {
                font-size: 26rpx;
                color: $color-gray-1;
                font-weight: bold;
            }

            .color-main {
                color: $color-orange-1;
            }
        }
    }
}

.pay-price {
    border-top: 1rpx solid #ebebeb;
    padding: 28rpx 0rpx 0rpx 0rpx;
    display: flex;
    justify-content: flex-end;
}

.await-pay-price-text {
    padding-left: 24rpx;

    text {
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
    }
}

.msg-item {
    padding: $app-page-padding;
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .msg-input {
        display: flex;
        margin-top: $app-page-padding;
        display: flex;
        height: 150rpx;
        background: #f7f7f7;
        border-radius: $border-radius-10;
        padding: 10rpx;
        width: calc(100% - 20rpx);
    }
}

.pop-pro-list {
    background: #f1f1f1;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 100rpx);
    }
}

.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}

.coupon-item {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .coupon-item-main {
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-coupon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .icon-coupon-name {
            flex: 1;
        }

        .no-use-coupon {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }

        .use-coupon {
            color: $color-orange-1;
            font-size: $font-size-24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 60%;
        }

        .icon-right {
            margin-left: 8rpx;
        }
    }

    .coupon-item-desc {
        text {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
    }
}

.edit {
    padding: 5rpx 12rpx;
    border-radius: 10rpx;
    color: $app-color-main !important;
    border: 1rpx solid $app-color-main;
    margin-left: 24rpx;
    font-size: 24rpx !important;
    font-weight: normal !important;
}

.add-pay-way-scroll {
    max-height: 50vh;
}

.gai {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    right: 0;
    top: -10rpx;
}
</style>
